<template>
    <div>
        <div class="crumbs">
            <Breadcrumb>
                <BreadcrumbItem to="/news"><Icon type="ios-document"/> 资讯列表</BreadcrumbItem>
                <BreadcrumbItem>资讯编辑</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <!-- 横排表单 -->
            <Form ref="form" :model="form" :label-width="120" :rules="rules">
                <Col :span="12">
                    <FormItem label="标题" prop="title">
                        <Input v-model="form.title" placeholder="请输入姓名"></Input>
                    </FormItem>
                    <FormItem label="来源" prop="source">
                        <Input v-model="form.source"></Input>
                    </FormItem>
                    <FormItem label="添加日期" prop="add_dt">
                        <DatePicker @on-change="(v)=>{form.add_dt = v}" :value="form.add_dt" type="date" placeholder="添加日期"></DatePicker>
                    </FormItem>
                    <FormItem label="分类" prop="cate_id">
                        <Select v-model="form.cate_id" clearable filterable placeholder="请选择" style="width:50%" @on-change="loadCateCustom">
                            <Option :key="id" v-for="(title, id) in cate" :value="id">{{title}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col :span="24">
                    <FormItem label="内容" prop="content">
                        <quill-editor ref="myTextEditor"
                        v-model="form.content" 
                        :config="editorOption"
                        @blur="onEditorBlur($event)"
                        >
                        </quill-editor>
                    </FormItem>
                </Col>
                <Custom :value="form.custom" :setting="custom"></Custom><!-- 自定义字段 -->
                
                <div style="clear:both;"></div>
                <div id="btnDiv">
                    <FormItem>
                        <Button icon="md-checkmark" type="primary" @click="submitForm">提交</Button>
                        <Button icon="md-close" @click="back">取消</Button>
                    </FormItem>
                </div>
            </Form>
        </Card>
    </div>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor';
    var module = 'news';
    export default {
        components: {
            quillEditor,
            Custom: require('../common/custom.vue'),    //自定义字段组件
        },
        data: function(){
            return {
                url: pub.apiDomain + module,
                form: {
                    add_dt: pub.today(),
                    content: '',
                    custom: {}, //自定义字段值值
                },
                cate:{},
                custom: [], //自字义字段配置
                //验证规则:需要在form组件加rule="rules",在input等组件上加prop="字段名"
                rules: {
                    title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
                    cate_id: [{ required: true, message: '请选择分类', trigger: 'blur' }],
                },
                editorOption: {
                    // something config
                }
            }
        },
        created(){
            this.getData();
        },
        mounted(){
            //监听自定义字段中的文件上传事件
            this.bus.$on('file_update', ({field, fileList}) => {
                this.form.custom[field] = fileList;
            });
        },
        methods: {
            //加载数据
            getData() {
                let id = this.$route.params.id;
                //加载分类列表
                this.$axios.get(pub.apiDomain + '/cate/map/module/'+module).then((res) => {
                    this.cate = res.d;
                })
                if(id > 0) {
                    //加载表单数据
                    this.$axios.get(this.url + '/get/id/'+id).then((res) => {
                        this.form = res.d;
                        this.form.cate_id += '_';
                        this.loadCateCustom();  //加载自定义字段配置
                    })
                }
            },
            onEditorBlur({ editor, html, text }) {
                console.log(html);
            },
            back(){
                this.$router.push('/news');
            },
            submitForm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$axios.post(this.url + '/save', this.form).then((res) => {
                            this.$Message.success('保存成功！');
                            this.$router.push('/'+module);
                        })
                    } else {
                        return false;
                    }
                });
            },
            //加载自定义字段（在分类中配置）
            loadCateCustom()
            {
                this.$axios.get(pub.apiDomain + 'cate/custom/id/'+this.form.cate_id).then((res) => {
                    this.custom = res.d;
                })
            },
        }
    }
</script>
<<style scoped>
#btnDiv{
    position: fixed;
    top: 144px;
    right: 60px;
}
</style>
